<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 900px),only screen and (min-device-width： 900px)" href="css/next_three.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 900px),only screen and （max-device-width： 900px）" href="css/three_change.css"/>
</head>

<body>
    <div class="left">
        <h2>
            <img src="img/logo.jpg" alt="">
            <span>Rukada Admin</span>
        </h2>
        <ul>
            <li class="li_one">MAIN NAVIGATION</li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li class="li_one">LABELS</li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="right">
        <header>
            <div class="right_left">
                <img src="img/sangang.jpg" alt="">
                <input type="text" placeholder="Enter keywords">
            </div>
            <div class="right_right">
                <img src="img/header-1.jpg" alt="">
                <img src="img/header-2.jpg" alt="">
                <img src="img/header-3.jpg" alt="">
                <img src="img/header-4.jpg" alt="">
            </div>
        </header>
        <section>
            <div class="section_left">
                <span>Blank Page</span>
                <p><a href="">Rukada</a> / <a href=""> Pages</a> / <span>Blank Page</span></p>
            </div>
            <img src="img/annnnn.jpg" alt="">
        </section>
        <div class="zhong">
            <ul>
                <li>DEFAULT BUTTONS</li>
                <li class="one">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
                <li>ROUND BUTTONS</li>
                <li class="two">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
                <li>SQUARE BUTTONS</li>
                <li class="three">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
                <li>LINK BUTTONS</li>
                <li class="four">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
            </ul>
            <div class="uls">
                <ul>
                    <li>SIZES BUTTONS</li>
                    <li class="five">
                        <a href="">PRIMARY</a>
                        <a href="">DANGER</a>
                        <a href="">SUCCESS</a>
                    </li>
                </ul>
                <ul>
                    <li>ROUND SIZES BUTTONS</li>
                    <li class="six">
                        <a href="">DARK</a>
                        <a href="">SECONDARY</a>
                        <a href="">LIGHT</a>
                    </li>
                </ul>
            </div>
            <div class="uls">
                <ul>
                    <li>BLOCK LEVEL BUTTONS</li>
                    <li class="ono_one">
                        <a href="">PRIMARY</a>
                        <a href="">DANGER</a>
                        <a href="">SUCCESS</a>
                    </li>
                </ul>
                <ul>
                    <li>ROUND BLOCK LEVEL BUTTONS</li>
                    <li class="one_two">
                        <a href="">DARK</a>
                        <a href="">SECONDARY</a>
                        <a href="">LIGHT</a>
                    </li>
                </ul>
            </div>
            <ul>
                <li>DEFAULT BUTTONS</li>
                <li class="one">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
                <li>ROUND BUTTONS</li>
                <li class="two">
                    <a href="">PRIMARY</a>
                    <a href="">DANGER</a>
                    <a href="">SUCCESS</a>
                    <a href="">INFO</a>
                    <a href="">WARNIG</a>
                    <a href="">DARK</a>
                    <a href="">SECONDARY</a>
                    <a href="">LIGHT</a>
                </li>
            </ul>
        </div>
        <div class="foot">
                <p> Copyright © 2018 Rukada Admin</p>
            </div>
    </div>

</body>

</html>
<script src="js/publick.js"></script>
<script type="text/javascript">
fn();
</script>